<template>
    <section class="register-banner"><h3>{{$t('register_banner_title')}}</h3><a
        href="/signup?utm_source=website&amp;utm_medium=footer_banner" event="Global Signup Btn">{{$t('register_banner_button')}}</a></section>
</template>

<script>
export default {
    name: "RegisterBanner"
}
</script>

<style scoped lang="scss">
@media (max-width: 767.98px) {
    .register-banner {
        flex-direction: column;
        padding: 0 25px;
        h3 {
            text-align: center!important;
            font-size: 24px!important;
            line-height: 1.5!important;
            margin: 0 0 32px!important;
        }
    }
}

.register-banner {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../assets/feature_bg.6829b.svg) center -2px no-repeat, linear-gradient(
            262.85deg, #6d4cf1 1.83%, #5d45f3 99.04%);

    h3 {
        font-size: 40px;
        font-weight: 400;
        color: #fff;
        margin-right: 48px;
    }

    a {
        display: inline-block;
        font-size: 16px;
        line-height: 20px;
        font-weight: 500;
        padding: 13px 70px;
        color: #fff;
        letter-spacing: 1.5px;
        background: #ff960c;
        border-radius: 50px;
        transition: all .2s ease;
    }

    a:hover {
        background: #ffa024;
        transform: translateY(-2px);
    }
}
</style>
